<template>
  <div class="nav">
    <el-backtop :bottom="100">↑</el-backtop>
    <!-- 主体区域 -->
    <div class="nav1">
      <!-- 上部区域 -->
      <div class="header">
        <!-- 导航栏区域 -->
        <el-row>
          <!-- 左侧图标栏 -->
          <el-col :xs="4" :sm="4" :md="6" :lg="6" :xl="6">
            <h1>
              <a href="#" class="logo">
                <img src="http://style.wuliwu.top/LOGO" />
              </a>
            </h1>
          </el-col>
          <!-- 右侧链接栏 -->
          <el-col class="hidden-sm-and-down" :xs="20" :sm="20" :md="18" :lg="18" :xl="18">
            <el-row>
              <ul>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">首页</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">关于</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">业务咨询</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">新闻资讯</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">加入我们</a>
                  </li>
                </el-col>
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <li>
                    <a href="#">联系我们</a>
                  </li>
                </el-col>
              </ul>
            </el-row>
          </el-col>
          <el-col class="hidden-sm-and-up" :xs="20" :sm="20" :md="18" :lg="18" :xl="18">
            <el-dropdown>
              <el-button type="primary">
                更多菜单
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <a href="#">首页</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">关于</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">业务咨询</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">新闻资讯</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">加入我们</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="#">联系我们</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
      <!-- 第一部分背景区域 -->
      <div class="main">
        <h2>关于我们</h2>
        <span>About Us</span>
      </div>
      <!-- 第二部分简介区域 -->
      <div class="about">
        <h4>公司简介</h4>
        <p>乔克网络科技有限公司，是一家面向全球的B2C跨境电商公司。前身专注于海外移动互联网大数据营销，并拥有长达5年以上的经验与资源。我们正式成立于2017年，总部诞生于深圳，在长沙、衡阳和香港均设有子公司。 开创以客户需求为主导，自主开发新品，提供个性化的购物体验，数万种产品通过Facebook、Google、自营平台、第三方平台等多种渠道销售至全世界，主要以自营商城为主，第三方平台为辅助，出口贸易+互联网数据+零售+产品创新+海外社交媒体营销+物流+服务，努力让全球每个人都能享用来自中国的优质产品。 我们的产品涉及家居用品，工具类，3C电子产品，潮流服饰、户外用品等，截至目前注册用户已遍及全球一百多个国家，公司自成立以来，每年以翻番的速度飞速发展，目前正在逐步实现一体化的全球电子商务管理，致力于成为发展最快最好的跨境企业。</p>
        <hr />
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-image src="http://cdn.wuliwu.top/cen" fit="contain"></el-image>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <h4>企业愿景</h4>
            <p>注重客户、拥抱变化、积极进取、团结协作、乐于分享、真实坦诚</p>
            <hr />
            <h4>企业价值观</h4>
            <p>做更快、更强、更高效的跨境电商</p>
            <hr />
            <h4>企业使命</h4>
            <p>让优质的“Made in China”遍及全球</p>
          </el-col>
        </el-row>
      </div>
      <!-- 第三部分发展历程 -->
      <div class="develop">
        <h4>发展历程</h4>
        <el-steps :active="5" align-center>
          <el-step title="公司起步" icon="el-icon-s-home" description="1998-4-1"></el-step>
          <el-step title="第一款产品发布" icon="el-icon-s-claim" description="1999-8-8"></el-step>
          <el-step title="公司成立三周年" icon="el-icon-s-flag" description="2001-4-1"></el-step>
          <el-step title="公司上市" icon="el-icon-office-building" description="2008-8-8"></el-step>
          <el-step title="成为全国百强企业" icon="el-icon-s-data" description="2012-12-12"></el-step>
          <el-step title="如今" icon="el-icon-map-location" description="2020-4-1"></el-step>
        </el-steps>
      </div>
    </div>
    <!-- 第四部分底部区域 -->
    <div class="footer">
      <!-- 宽度限制区域 -->
      <div class="footer_01">
        <!-- 左侧区域 -->
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <h2>乔克科技</h2>
            <ul>
              <li>
                <a href="#">关于乔克</a>
              </li>
              <li>
                <a href="#">业务资讯</a>
              </li>
              <li>
                <a href="#">加入我们</a>
              </li>
              <li>
                <a href="#">联系我们</a>
              </li>
            </ul>
          </el-col>
          <!-- 右侧区域 -->
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <h5>Email</h5>
                <p>carrycry@outlook.com</p>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <h5>Contact Phone</h5>
                <p>+86 18657302512</p>
              </el-col>
            </el-row>
            <el-row>
              <h5>Address</h5>
              <p>浙江省嘉兴市秀洲区666号</p>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="foot">
      <p>浙ICP备19040733号</p>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.nav {
  font: 14px/1.8 '微软雅黑', Arial, '黑体';
  width: 100%;
  height: 100%;
  background: url(../assets/night.jpg) no-repeat center top;
}
/* 整个页面宽占比 */
.nav1 {
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.hidden-sm-and-up {
  margin: auto;
  line-height: 90px;
  text-align: right;
}
.hidden-sm-and-down li {
  text-align: center;
  border-bottom: 2px #00d584 solid;
  margin: 0 5px;
}
.hidden-sm-and-down a {
  text-decoration: none;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-size: 16px;
}
.main {
  text-align: center;
  color: #fff;
  margin: 20px 0;
}
.main h2 {
  font-size: 42px;
  line-height: 70px;
}
.main span {
  font-size: 24px;
  line-height: 34px;
  color: #77a9f3;
}
/* 第二部分简介区域 */
.about {
  background-color: #fff;
  padding: 30px;
}
.about h4 {
  font-size: 28px;
  font-weight: bold;
}
.about p {
  font-size: 16px;
  text-indent: 2em;
}
.about .el-col h4 {
  margin: 20px 10px;
}
.about .el-col p {
  font-size: 18px;
}
.develop {
  padding: 30px;
  background-color: light;
}
.develop h4 {
  font-size: 28px;
  font-weight: bold;
  padding-bottom: 30px;
}
/* 底部区域 */
.footer {
  background-color: #999;
  overflow: hidden;
}
.footer_01 {
  width: 90%;
  color: #fff;
  margin: 20px auto 0;
  text-align: center;
}
/* 底部左侧导航栏 */
.footer_01 h2 {
  font-size: 32px;
  margin-bottom: 20px;
}
.footer_01 ul li {
  display: inline;
}
.footer_01 ul li a {
  display: inline-block;
  padding: 0 10px;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
.footer_01 ul li a:hover {
  color: rgb(6, 113, 185);
}
/* 底部右侧联系方式 */
.footer_01 h5 {
  font-size: 18px;
}
.footer_01 p {
  font-size: 14px;
}
.foot {
  text-align: center;
  background-color: #dedede;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}
.foot p {
  font-size: 16px;
}
</style>
